<template>
  <div id="myPlayer" style="width: 100%; height: 100%">
    <div
      :style="
        'position: relative;max-width: ' +
        maxWidth +
        'px;max-height: ' +
        maxHeight +
        'px;width: 100%;height: 100%;'
      "
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div
        class="videoContainer prism-player"
        ref="videoContainer"
        :style="'position: absolute;width: 100%;height:100%;background-color: transparent;'"
      >
        <!-- <video :src="url" controls="controls" poster="./dist/logo.jpg" :width="100%" :height="100%" style="position: absolute;background-color: black;"
					@mouseleave="mouseleave" @mouseenter="mouseenter"> -->
        <!-- https://www.cnblogs.com/fps2tao/p/10550726.html  video控制方法 -->
        <video
          ref="video"
          name="videoElement"
          class="centeredVideo unuserselect"
          autoplay="autoplay"
          :style="this.baseStyles"
          poster="../../../public/dist/videobg.jpg"
        ></video>
        <!-- video   添加背景图   poster="../../../public/dist/home.jpg" -->
        <div
          v-show="showControlBar"
          :style="'position: absolute;width: 100%;height: 80%;background-color: transparent;'"
        >
          <div
            v-if="false && videoType == 1 && showVideoInfo && videoInfo"
            class="info"
          >
            <div style="font-size: 20px">{{ videoInfo.name }}</div>
            <div class="">{{ videoInfo.collPointName }}</div>
            <div class="">{{ videoInfo.devName }}</div>
          </div>
          <!-- <div v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" class="alarmTips">报警信息列表</div> -->
          <!-- <div v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" class="recordTips">录像提示</div> -->
          <div
            v-if="false && videoType > 0 && showVideoInfo && VInfo"
            class="channelInfo"
          >
            <!-- <div><div class="title">物理频道编号:</div><div class="subTitle">BJ020304</div></div>
						<div><div class="title">直播频道编号:</div><div class="subTitle">zh567332</div></div>
						<div><div class="title">视频编码:</div><div class="subTitle">h264</div></div>
						<div><div class="title">视频编码格式:</div><div class="subTitle">mp4</div></div>
						<div><div class="title">音频编码格式:</div><div class="subTitle">AAC</div></div>
						<div><div class="title">节目视频分辨率:</div><div class="subTitle">720*576</div></div>
						<div><div class="title">节目视频编码率:</div><div class="subTitle">3500kbs</div></div>
						<div><div class="title">声道:</div><div class="subTitle">5声道</div></div>
						<div><div class="title">节目音频编码:</div><div class="subTitle">AAC</div></div>
						<div><div class="title">组播IP和端口:</div><div class="subTitle">10.23.64.84:8900</div></div>
						<div><div class="title">最长延时时间:</div><div class="subTitle">30秒</div></div> -->
            <div class="videoInfoItem">
              <div class="title">节目视频类型:</div>
              <div class="subTitle">{{ VInfo.VType }}</div>
            </div>
            <div class="videoInfoItem">
              <div class="title">视频ID:</div>
              <div class="subTitle">{{ VInfo.VPid }}</div>
            </div>
            <div class="videoInfoItem">
              <div class="title">节目视频编码率:</div>
              <div class="subTitle">
                {{ VInfo.VRate ? VInfo.VRate + "kbs" : "" }}
              </div>
            </div>
            <div class="videoInfoItem">
              <div class="title">节目视频分辨率:</div>
              <div class="subTitle">
                {{ VInfo.VWidth ? VInfo.VWidth + "*" + VInfo.VHeight : "" }}
              </div>
            </div>
            <div class="videoInfoItem">
              <div class="title">帧数:</div>
              <div class="subTitle">{{ VInfo.VFps }}</div>
            </div>
            <div class="videoInfoItem">
              <div class="title">比特位深:</div>
              <div class="subTitle">
                {{ VInfo.VBitDepth ? VInfo.VBitDepth + "位" : "" }}
              </div>
            </div>
            <div class="videoInfoItem">
              <div class="title">颜色模式:</div>
              <div class="subTitle">{{ VInfo.VColorMode }}</div>
            </div>
            <div class="videoInfoItem">
              <div class="title">Mark:</div>
              <div class="subTitle">{{ VInfo.Mark }}</div>
            </div>
            <div class="videoInfoItem">
              <div class="title">BlackEdge:</div>
              <div class="subTitle">{{ VInfo.BlackEdge }}</div>
            </div>
          </div>
          <!-- <div v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" class="alermSet">报警设置</div>	 -->
        </div>

        <div
          class=""
          :style="'position: absolute;width: 100%;height: 100%;background-color: transparent;'"
          @mouseleave="mouseleave"
          @mouseenter="mouseenter"
        >
          <!-- 34 46 58 -->
          <!-- 提示音量，不能seek到这里 -->
          <!-- <p class="prism-info-display prism-info-left-bottom" id="player-con_component" style="float: left; margin-left: 0px; margin-top: 0px; display: none;">
						当前音量：<span>51%</span>
					</p> -->
          <!-- 按键提示 -->
          <p
            class="prism-tooltip"
            ref="tip"
            style="position: absolute; left: 5px; bottom: 50px; display: none"
          >
            播放
          </p>
          <!-- 时间进度提示 -->
          <div
            class="prism-thumbnail"
            ref="playerComponent"
            :style="
              'float: left; margin-left: 0px; margin-top: 0px; border: none; left: ' +
              progressTipLeft +
              'px;'
            "
          >
            <span style="left: 0px">{{
              !isInfinity ? timeStr(dargToTime) : ""
            }}</span>
          </div>
          <!-- 音量滑块 -->
          <div
            class="prism-volume-control hover"
            ref="volumeSlider"
            @mousemove="volumeCursorMouseMove"
            @mouseup="volumeCursorMouseUp"
            @mouseenter="volumeCursorMouseenter"
            @mouseleave="volumeCursorMouseleave"
            :style="
              'float: right;right: 40px;display:' +
              (showVolumeSlider ? 'block' : 'none') +
              ';'
            "
          >
            <div class="volume-range">
              <div
                class="volume-value"
                :style="'height: ' + volumeValue + '%;'"
              ></div>
              <div
                @mousedown="volumeCursorMouseDown"
                class="volume-cursor"
                :style="'bottom: ' + volumeValue + '%;'"
              ></div>
            </div>
          </div>

          <!-- 黑色背景色 -->
          <div
            v-show="playerDebug || showControlBar"
            style="
              position: absolute;
              left: 0px;
              height: 40px;
              bottom: 0;
              width: 100%;
              background: #000;
              opacity: 0.8;
            "
          ></div>

          <!-- 控制栏 -->
          <div
            class="prism-controlbar"
            ref="prismControlbar"
            v-show="playerDebug || showControlBar"
            style="position: absolute; left: 0px; bottom: 0px"
          >
            <div class="prism-controlbar-bg"></div>
            <div v-if="true || !myIsLive" name="非直播">
              <!-- 进度条 -->
              <div
                v-if="!myIsLive"
                class="prism-progress"
                style="position: absolute; left: 0px; bottom: 44px"
              >
                <div class="prism-progress-loaded" style="width: 100%"></div>
                <div
                  class="prism-progress-played"
                  :style="
                    'width: ' +
                    (duration == 0
                      ? 0
                      : 1.6 + (currentTime * 98.4) / duration) +
                    '%;'
                  "
                ></div>
                <div
                  class="prism-progress-marker"
                  @click="player_seekto(dargToTime)"
                  @mouseenter="progressMouseenter"
                  @mouseleave="progressMouseleave"
                  @mousemove="progressMousemove"
                ></div>
                <div
                  class="prism-progress-cursor"
                  ref="progressCursor"
                  :style="
                    'right: auto;display:none; left: ' +
                    (0 + (currentTime * 98.4) / duration) +
                    '%;'
                  "
                >
                  <img src="../../../public/dist/img/dragcursor.png" />
                </div>
                <p class="prism-progress-time"></p>
              </div>
              <!-- 开始暂停按钮 -->
              <div
                :class="'prism-play-btn ' + (playing ? 'playing' : '') + ' '"
                @click="videoStart(!playing)"
                @mouseleave="mouseleave1()"
                @mouseenter="mouseenter1('tag1')"
                ref="tag1"
                style="float: left; margin-left: 15px; margin-top: 12px"
              ></div>
              <!-- 停止与清空 -->
              <div
                v-if="this.playMode == 'live'"
                @click="videoClear(item)"
                @mouseleave="mouseleave1()"
                @mouseenter="mouseenter1('tag0')"
                ref="tag0"
                style="float: left; margin-left: 15px; margin-top: 12px"
              >
                <a-icon type="rest" style="font-size: 20px"></a-icon>
              </div>
              <div
                v-if="this.playMode == 'record'"
                :class="'prism-stop-btn'"
                @click="videoStop"
                @mouseleave="mouseleave1()"
                @mouseenter="mouseenter1('tag8')"
                ref="tag8"
                style="float: left; margin-left: 15px; margin-top: 12px"
              ></div>

              <!-- 时间 -->
              <div
                class="prism-time-display unuserselect"
                style="float: left; margin-left: 10px; margin-top: 5px"
              >
                <span class="current-time" style="display: inline">{{
                  timeStr(currentTime)
                }}</span>
                <span
                  v-show="!isInfinity"
                  class="time-bound"
                  style="display: inline"
                  >/</span
                >
                <span
                  v-show="!isInfinity"
                  class="duration"
                  style="display: inline"
                  >{{ timeStr(duration) }}</span
                >
              </div>
              <!-- 快退 快进 上一帧 下一帧 -->
              <div style="float: left; margin-left: 10px; margin-top: 12px">
                <a-tooltip
                  v-if="!myIsLive"
                  placement="top"
                  :getPopupContainer="popupContainer"
                >
                  <template slot="title">快退10秒</template>
                  <span @click="player_seekto(currentTime - 10)"
                    ><i
                      class="iconfont icon-houtui1"
                      style="font-size: 21px; cursor: pointer"
                    ></i
                  ></span>

                  <!-- icon -->
                  <!-- <a-icon
                    type="fast-backward"
                    style="font-size: 24px"
                    @click="player_seekto(currentTime - 10)"
                  /> -->
                </a-tooltip>
                <a-tooltip
                  v-if="!myIsLive"
                  placement="top"
                  :getPopupContainer="popupContainer"
                >
                  <template slot="title">上一帧</template>
                  <a-icon
                    type="step-backward"
                    style="font-size: 24px"
                    @click="player_seekto(currentTime - 1 / fps)"
                  />
                </a-tooltip>
                <a-tooltip
                  v-if="!myIsLive"
                  placement="top"
                  :getPopupContainer="popupContainer"
                >
                  <template slot="title">下一帧</template>
                  <a-icon
                    type="step-forward"
                    style="font-size: 24px"
                    @click="player_seekto(currentTime + 1 / fps)"
                  />
                </a-tooltip>
                <a-tooltip
                  v-if="!myIsLive"
                  placement="top"
                  :getPopupContainer="popupContainer"
                >
                  <template slot="title">快进10秒</template>
                  <!-- 图标 -->
                  <span @click="player_seekto(currentTime + 10)"
                    ><i
                      class="iconfont icon-qianjin"
                      style="font-size: 21px; cursor: pointer"
                    ></i
                  ></span>
                  <!-- 图标 -->
                  <!-- <a-icon
                    type="fast-forward"
                    style="font-size: 24px"
                    @click="player_seekto(currentTime + 10)"
                  /> -->
                </a-tooltip>

                <a-tooltip
                  v-if="!myIsLive && !this.showChild"
                  placement="top"
                  :getPopupContainer="popupContainer"
                >
                  <template slot="title">上一个</template>
                  <a-icon
                    type="backward"
                    style="font-size: 24px"
                    @click="player_creamupdown('up')"
                  />
                </a-tooltip>
                <a-tooltip
                  v-if="!myIsLive && !this.showChild"
                  placement="top"
                  :getPopupContainer="popupContainer"
                >
                  <template slot="title">下一个</template>
                  <a-icon
                    type="forward"
                    style="font-size: 24px"
                    @click="player_creamupdown('down')"
                  />
                </a-tooltip>
                <!-- <a-icon type="fast-backward" style="font-size: 24px;" @click="player_seekto(currentTime - 10)"/>
								<a-icon type="step-backward" style="font-size: 24px;" @click="player_seekto(currentTime - 1/fps)"/>
								<a-icon type="step-forward" style="font-size: 24px;" @click="player_seekto(currentTime + 1/fps)"/>
								<a-icon type="fast-forward" style="font-size: 24px;" @click="player_seekto(currentTime + 10)"/> -->
              </div>
            </div>
            <!-- 全屏 -->
            <div
              :class="
                'prism-fullscreen-btn ' +
                (isFullScreen || (item && item.isFull) ? 'fullscreen' : '') +
                ' '
              "
              @click="fullscreenClick"
              @mouseleave="mouseleave1()"
              @mouseenter="mouseenter1('tag2')"
              ref="tag2"
              style="float: right; margin-right: 10px; margin-top: 12px"
            ></div>

            <!-- 音量控制 -->
            <!-- <div class="prism-volume" @click="()=>showVolumeSlider=!showVolumeSlider" @mouseleave="mouseleave1()" @mouseenter="mouseenter1('tag3')" ref="tag3" style="float: right; margin-right: 5px; margin-top: 10px;"> -->
            <div
              class="prism-volume"
              @click="volumeClick"
              @mouseleave="volumeMouseleave"
              @mouseenter="() => (showVolumeSlider = true)"
              ref="tag3"
              style="float: right; margin-right: 5px; margin-top: 10px"
            >
              <div :class="'volume-icon ' + (volumeValue ? '' : 'mute') + ''">
                <div class="short-horizontal"></div>
                <div class="long-horizontal volume-hover-animation"></div>
              </div>
            </div>
            <!-- cc -->
            <div
              v-if="videoType > 0"
              class="prism-cc-btn"
              @mouseleave="mouseleave1()"
              @mouseenter="mouseenter1('tag4')"
              ref="tag4"
              @click="showVideoInfo = !showVideoInfo"
              style="float: right; margin-right: 15px; margin-top: 12px"
            ></div>
            <!-- 设置 -->
            <div
              v-show="false"
              class="prism-setting-btn"
              @mouseleave="mouseleave1()"
              @mouseenter="mouseenter1('tag5')"
              ref="tag5"
              style="float: right; margin-right: 15px; margin-top: 12px"
            ></div>

            <!-- 截屏 -->
            <div
              @click="screenshot"
              @mouseleave="mouseleave1()"
              @mouseenter="mouseenter1('tag6')"
              ref="tag6"
              style="
                float: right;
                margin-right: 9px;
                margin-top: 9px;
                cursor: pointer;
              "
            >
              <a-icon type="camera" style="font-size: 24px; margin-top: 3px" />
            </div>

            <!-- 云台 -->
            <div
              v-if="this.playMode == 'live'"
              @click="handlerPan"
              @mouseleave="mouseleave1()"
              @mouseenter="mouseenter1('tag7')"
              ref="tag7"
              style="
                float: right;
                margin-right: 9px;
                margin-top: 9px;
                cursor: pointer;
              "
            >
              <a-icon
                type="up-circle"
                style="font-size: 24px; margin-top: 3px"
              />
            </div>

            <!-- 倍速 -->
            <a-tooltip
              v-if="!myIsLive"
              placement="top"
              :getPopupContainer="popupContainer"
            >
              <template slot="title">
                <span
                  class="ratevalue"
                  @click="
                    () => {
                      playbackRate = 0.5;
                    }
                  "
                  >0.5倍速</span
                ><br />
                <span
                  class="ratevalue"
                  @click="
                    () => {
                      playbackRate = 1;
                    }
                  "
                  >1倍速</span
                ><br />
                <span
                  class="ratevalue"
                  @click="
                    () => {
                      playbackRate = 2;
                    }
                  "
                  >2倍速</span
                ><br />
                <span
                  class="ratevalue"
                  @click="
                    () => {
                      playbackRate = 4;
                    }
                  "
                  >4倍速</span
                ><br />
                <span
                  class="ratevalue"
                  @click="
                    () => {
                      playbackRate = 8;
                    }
                  "
                  >8倍速</span
                ><br />
                <span
                  class="ratevalue"
                  @click="
                    () => {
                      playbackRate = 16;
                    }
                  "
                  >16倍速</span
                ><br />
              </template>
              <div
                style="
                  height: 24px;
                  float: right;
                  margin-right: 9px;
                  margin-top: 13px;
                  text-align: right;
                  cursor: pointer;
                "
              >
                {{ playbackRate }}倍速
              </div>
            </a-tooltip>
            <!-- 直播显示live,目前显示直播显示进度条 -->
            <div v-if="false && myIsLive" name="直播">
              <p
                class="prism-live-display"
                style="position: absolute; left: 15px; top: 6px"
              >
                LIVE
              </p>
            </div>
          </div>
        </div>

        <div
          v-show="true"
          @dblclick="fullscreenClick"
          @mouseleave="mouseleave"
          @mouseenter="mouseenter"
          :style="'position: absolute;width: 100%;height: calc(100% - 44px);background-color: transparent;'"
        ></div>
      </div>

      <div
        v-if="false && videoType > 0"
        :style="
          'position: absolute;width: 100% ;height:50px;left: ' +
          0 +
          'px;top:' +
          computedHeight +
          'px;background-color: rgba(0,0,0,.15);'
        "
      >
        <!-- <a-button v-if="true" type="primary" @click="showVideoInfo=!showVideoInfo">视频信息</a-button> -->
        <!-- <a-button v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" type="primary">报警设置</a-button> -->
        <!-- <a-button v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" type="primary">待处理报警</a-button> -->
        <!-- <a-button v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" type="primary">待处理违规</a-button> -->
        <!-- <a-button v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" type="primary">录像设置</a-button> -->
        <!-- <a-button v-if="true && videoInfo" type="primary" @click="changeVideoType">{{ buttonText }}</a-button> -->
        <!-- <a-button v-if="videoInfo && (videoType == 4 || videoType == 5 || videoType == 6)" type="primary" @click="queryDownUrl(videoInfo)">下载录像</a-button> -->
      </div>

      <div
        v-if="false"
        :style="'position: absolute;top:' + (computedHeight + 50) + 'px'"
      >
        <button @click="buttonClick('http://test2.iksonya.com/ts/test')">
          大鱼海棠直播
        </button>
        <button
          @click="
            buttonClick(
              'http://192.168.3.100/index/api/webrtc?app=live&stream=test&type=play'
            )
          "
        >
          rtc测试
        </button>
        <!-- 				<button @click="buttonClick('http://192.168.0.103/1.ts')">鬼灭之刃点播</button>
				<button @click="buttonClick('http://192.168.0.103/zhw.ts')">指环王点播</button> -->
      </div>
    </div>
  </div>
</template>

<!-- <script src="./dist/polyvisionts.js"></script> -->
<script>
import elementResizeDetectorMaker from "element-resize-detector";
// import { getAction } from '@/api/manage'
// import { getDownUrl, getChannelInfo } from '@/api/api'
import moment from "moment";
import eventBus from "../../components/eventBus.js";
// import polyvisionts from './dist/polyvisionts.js'
//
import { getAction, postAction } from "@/api/manage";

let polyvisionts = window._CONFIG["polyvisionts"];
let Hls = window._CONFIG["Hls"];
let flvjs = window._CONFIG["flvjs"];
let ZLMRTCClient = window._CONFIG["ZLMRTCClient"];

export default {
  name: "Player",
  data() {
    return {
      loading: false,
      // baseStyles: {
      //   width: "100%",
      //   height: "100%",
      //   position: "absolute",
      //   backgroundColor: "black",
      // },
      title: "播放器",
      TSplayer: null,
      FLVplayer: null,
      HLSplayer: null,
      RTCplayer: null,
      changeWidth: 0,
      changeHeight: 0,
      isFullScreen: false,
      ti: null, //轮询播放器状态定时器
      status: "none", //none：无状态，loading：加载中，play：播放，pause：暂停，ended：播放完毕，
      playing: false,
      dargToTime: 0,
      currentTime: 0,
      duration: 0, //Infinity
      mouseoffsetX: 0, //用于计算点击进度条，和显示进度条时间
      volumeValue: 100, //音量
      saveVolumeValue: 100, //保存音量，关闭之后再开启使用
      volumeClientY: 0, //用于计算滑块位置
      playbackRate: 1, //视频播放速率playbackRate
      showControlBar: false,
      showVideoInfo: false,
      showVolumeSlider: false,
      volumeSliderEnableMove: false,
      mouseInVolumeCursor: false,
      myUrl: "",
      myIsLive: true,
      myPlugin: "rtc",
      VInfo: null,
      downUrl: "",
      timeout: null,
      testData: "获取接口数据显示",
      testJSObject: null,
      /* 搜索条件下拉框 */
      playerDebug: false,
    };
  },
  components: {},
  props: {
    item: {
      type: Object,
      default: null,
    },
    videoType: {
      type: Number,
      default: 0,
      required: false,
    },
    maxWidth: {
      type: Number,
      default: 3200,
    },
    fps: {
      type: Number,
      default: 25,
    },
    width: {
      type: Number,
      default: 960,
    },
    maxHeight: {
      type: Number,
      default: 1800,
    },
    height: {
      type: Number,
      default: 540,
    },
    urlOption: {
      type: Object,
      default: null,
    },
    videoInfo: {
      type: Object,
      default: null,
    },
    playMode: {
      type: String,
    },
    showPtz: {
      type: String,
    },
    baseStyles: {
      type: Object,
    },
  },
  watch: {
    urlOption(val, oldUrl) {
      console.log("urlOptionChange", oldUrl + "->" + val);

      console.log(this.item.childrenList, this.item, " this.item.childrenList");

      this.playbackRate = 1; //地址更换后 倍速默认为1

      var Media = this.$refs.video;
      Media.volume = 0 / 100;
      this.volumeValue = 0; //声音默认为0

      if (this.item.childrenList) {
        if (this.item.childrenList.length > 1) {
          this.showChild = false;
        } else if (
          this.item.childrenList.length == 0 ||
          this.item.childrenList.length - 1 == 0
        ) {
          this.showChild = true;
        }
      }
      // var Media = this.$refs.video;
      // Media.volume = this.volumeValue / 100;
      // console.log(" Media.volume ", Media.volume);

      console.log(val, "===val==");
      console.log(oldUrl, "===oldUrl==");
      if (val) {
        console.log(111);
        this.myUrl = val.url;
        this.myIsLive = val.isLive;
        this.myPlugin = val.plugin;

        console.log(val.url);
        this.player_load(val.url);
      } else {
        this.player_destroy();
      }
    },
    // 下载录像使用 bizProgId，multiCastUrl，startDateTime，endDateTime
    // 获取节目信息 channelId，bizProgId，multiCastUrl，startDateTime，endDateTime
    videoInfo(val, oldUrl) {
      // console.log('videoInfochange',oldUrl + '->' + val)
      if (!val.ProgramInfo) {
        // this.getEpgChannelInfo(val);
      }
    },
    volumeValue(val, oldUrl) {
      console.log("watch监听volumeValue发生变化");
      console.log(val);
      if (val != 0) {
        this.saveVolumeValue = val;
      }
      var Media = this.$refs.video;
      Media.volume = val / 100;
      console.log(Media.volume, "Media.volume");
    },
    playbackRate(val, oldUrl) {
      var Media = this.$refs.video;
      Media.playbackRate = val;
    },
  },
  computed: {
    buttonText() {
      return this.videoType == 1
        ? "直播录像"
        : this.videoType == 2
        ? "回看录像"
        : this.videoType == 3
        ? "点播录像"
        : this.videoType == 4
        ? "直播监看"
        : this.videoType == 5
        ? "回看监看"
        : this.videoType == 6
        ? "点播监看"
        : "直播录像";
    },
    toUrl() {
      return this.videoType == 1
        ? "/watch/liveRecord"
        : this.videoType == 2
        ? "/watch/backRecord"
        : this.videoType == 3
        ? "/watch/chooseRecord"
        : this.videoType == 4
        ? "/watch/liveWatch"
        : this.videoType == 5
        ? "/watch/backWatch"
        : this.videoType == 6
        ? "/watch/chooseWatch"
        : "/watch/liveRecord";
    },
    isInfinity() {
      return this.duration == Infinity;
    },
    // 时间进度条
    progressTipLeft() {
      let elwidth = 46;
      var width = this.$refs.video
        ? this.$refs.video.getBoundingClientRect().width
        : 960;
      if (Math.floor((this.duration * this.mouseoffsetX) / width) > 3600)
        elwidth = 64;
      // console.log(elwidth);
      if (this.mouseoffsetX - elwidth / 2 < 5) return 5;
      if (width - this.mouseoffsetX - elwidth / 2 < 5)
        return width - elwidth - 5;
      return this.mouseoffsetX - elwidth / 2;
    },
    computedWidth() {
      return this.changeWidth < this.maxWidth
        ? this.changeWidth
        : this.maxWidth;
    },
    computedHeight() {
      return this.changeHeight < this.maxHeight
        ? this.changeHeight
        : this.maxHeight;
    },
  },
  created() {},
  methods: {
    test() {
      console.log("111");
      return false;
    },
    popupContainer() {
      return this.$refs.videoContainer;
    },
    buttonClick(url) {
      this.player_load(url);
    },
    timeStr(time) {
      if (time == Infinity) return "";
      if (time < 3600) {
        let min = Math.floor(time / 60);
        min = min <= 9 ? "0" + min : "" + min;
        let sec = Math.floor(time % 60);
        sec = sec <= 9 ? "0" + sec : "" + sec;
        return min + ":" + sec;
      } else {
        let hour = Math.floor(time / 3600);
        hour = hour <= 9 ? "0" + hour : "" + hour;
        let min = Math.floor((time % 3600) / 60);
        min = min <= 9 ? "0" + min : "" + min;
        let sec = Math.floor(time % 60);
        sec = sec <= 9 ? "0" + sec : "" + sec;
        return hour + ":" + min + ":" + sec;
      }
    },
    // 鼠标移出主界面
    mouseleave() {
      // console.log('mouseleave')
      this.timeout = setTimeout(() => {
        this.showControlBar = false;
        this.showVolumeSlider = false;
        this.timeout = null;
      }, 300);
    },
    // 鼠标移入主界面
    mouseenter() {
      console.log("鼠标移入主页面");
      if (this.playMode == "live") {
        this.myIsLive = true;
      }
      this.showControlBar = true;
      if (this.timeout) {
        clearTimeout(this.timeout);
        this.timeout = null;
      }
    },
    // 鼠标移出控制栏按钮
    mouseleave1(tag) {
      // console.log(tag)
      let el = this.$refs.tip;
      el.style.display = "none";
    },
    // 鼠标移入控制栏按钮
    mouseenter1(tag) {
      // 先获取当前按钮中心
      let el1 = this.$refs[tag];
      let rect1 = el1.getBoundingClientRect();
      let center =
        (rect1.left + rect1.right) / 2 -
        this.$refs.prismControlbar.getBoundingClientRect().left;

      let el = this.$refs.tip;
      if (tag == "tag0") {
        el.innerText = "清空";
      } else if (tag == "tag1") {
        el.innerText = this.playing ? "暂停" : "播放";
      } else if (tag == "tag2") {
        el.innerText =
          this.isFullScreen || (this.item && this.item.isFull)
            ? "取消全屏"
            : "全屏";
      } else if (tag == "tag3") {
        el.innerText = "音量";
      } else if (tag == "tag4") {
        el.innerText = "节目信息";
      } else if (tag == "tag5") {
        el.innerText = "设置";
      } else if (tag == "tag6") {
        el.innerText = "截屏";
      } else if (tag == "tag7") {
        el.innerText = "云台";
      } else if (tag == "tag8") {
        el.innerText = "停止";
      }
      el.style.display = "block";
      let width = el.getBoundingClientRect().width;
      let left = center - width / 2;
      el.style.left = left + "px";
      el.style.right = "";
      // console.log(center)
      // console.log(width)
      // console.log(left)
    },
    // 鼠标移入进度条
    progressMouseenter() {
      // console.log('progressMouseenter')
      this.$refs.playerComponent.style.display = "block";
      this.$refs.progressCursor.style.display = "block";
    },
    // 鼠标移出进度条
    progressMouseleave() {
      // console.log('progressMouseleave')
      this.$refs.playerComponent.style.display = "none";
      this.$refs.progressCursor.style.display = "none";
    },
    // 鼠标移动进度条
    progressMousemove(e) {
      // console.log('progressMousemove',e.offsetX,e.offsetY)
      var width = this.$refs.video.getBoundingClientRect().width;
      this.mouseoffsetX = e.offsetX;
      this.dargToTime = (this.duration * this.mouseoffsetX) / width;
    },
    // 鼠标点击音量开启关闭
    volumeClick() {
      console.log(this.volumeValue);
      if (this.volumeValue) {
        this.volumeValue = 0;
      } else {
        this.volumeValue = this.saveVolumeValue;
      }
    },
    volumeMouseleave() {
      setTimeout(() => {
        console.log("volumeMouseleave", this.mouseInVolumeCursor);
        this.showVolumeSlider = this.mouseInVolumeCursor;
      }, 200);
    },

    // 鼠标按下音量
    volumeCursorMouseDown(e) {
      this.volumeSliderEnableMove = true;
      // console.log('MouseDown',e)
      var div = this.$refs.volumeSlider;
      var top = div.getBoundingClientRect().top;
      this.volumeClientY = parseInt(top);
    },

    // 鼠标移动音量
    volumeCursorMouseMove(e) {
      if (!this.volumeSliderEnableMove) return;
      let offY = e.clientY - this.volumeClientY;
      let value = 115 - offY;
      if (value > 100) value = 100;
      else if (value < 0) value = 0;
      this.volumeValue = value;
      console.log("MouseMove", value, e);
    },

    // 鼠标抬起音量
    volumeCursorMouseUp(e) {
      this.volumeSliderEnableMove = false;
    },

    // 鼠标移入音量
    volumeCursorMouseenter(e) {
      console.log("volumeCursorMouseenter");
      this.mouseInVolumeCursor = true;
    },

    // 鼠标移出音量
    volumeCursorMouseleave(e) {
      this.mouseInVolumeCursor = false;
      this.volumeSliderEnableMove = false;
      this.showVolumeSlider = false;
    },
    refreshVideoWithUrl(url, type, isLive) {
      console.log(
        moment().format(" HH:mm:ss "),
        "------refreshVideoWithUrl----",
        url,
        type,
        isLive
      );
      this.myUrl = url;
      if (typeof isLive == "boolean") {
        this.myIsLive = isLive;
      }
      this.myPlugin = type || this.myPlugin;
      if (url) {
        this.player_load(url);
      } else {
        this.player_destroy();
      }
    },

    // 以下为播放器方法
    player_load(url) {
      this.myUrl = url;
      console.log(this.myUrl, "this.myUrl");
      console.log(this.myPlugin, "this.myPlugin");
      if (this.myPlugin == "ts") {
        let mediaDataSource = {
          type: "mse",
        };
        mediaDataSource["url"] = url;
        this.TSplayer_load_mds(mediaDataSource);
      } else if (this.myPlugin == "flv") {
        let mediaDataSource = {
          type: "flv",
        };
        mediaDataSource["url"] = url;
        this.FLVplayer_load_mds(mediaDataSource);
      } else if (this.myPlugin == "rtc") {
        this.RTCplayer_load_url(url);
      } else if (this.myPlugin == "hls") {
        console.log("HLSplayer_load_url");
        this.HLSplayer_load_url(url);
      }
      this.status = "loading";
    },
    TSplayer_load_mds(mediaDataSource) {
      this.player_destroy();
      var element = this.$refs.video;
      this.TSplayer = polyvisionts.createPlayer(mediaDataSource, {
        enableWorker: true,
      });
      this.TSplayer._config.isLive = this.myIsLive;
      this.TSplayer.attachMediaElement(element);
      this.TSplayer.load();
      this.status = "loading";
      // Pause.disable = 'false';

      if (this.ti) {
        clearTimeout(this.ti);
        this.ti = null;
      }
      this.ti = setTimeout(() => {
        var Media = this.$refs.video;
        console.log("播放器状态", this.status);
        console.log("Media.error:", Media.error); //null:正常
        if (Media.error) {
          console.log("Media.error.code:", Media.error.code); //1.用户终止 2.网络错误 3.解码错误 4.URL无效
        }
        if (this.status == "loading") {
          console.log(
            moment().format(" HH:mm:ss "),
            "---------播放器加载超时，重新加载---------",
            this.myUrl
          );
          this.TSplayer_load_mds(mediaDataSource);
        } else if (this.status == "play") {
          console.log(
            moment().format(" HH:mm:ss "),
            "---------播放器加载成功，无需重新加载---------"
          );
        }
        // clearTimeout(this.ti)
        // this.ti = null;
      }, 3500);
    },
    FLVplayer_load_mds(mediaDataSource) {
      this.player_destroy();
      var element = this.$refs.video;
      console.log("------------");
      console.log(flvjs);
      this.FLVplayer = flvjs.createPlayer(mediaDataSource, {
        enableWorker: false,
        enableStashBuffer: false,
        lazyLoad: false,
        isLive: this.myIsLive,
        autoCleanupSourceBuffer: true,
        fixAudioTimestampGap: true,
      });
      this.FLVplayer.attachMediaElement(element);
      this.FLVplayer.load();
      this.status = "loading";
      // Pause.disable = 'false';
    },
    RTCplayer_load_url(url) {
      console.log(url, "RTCplayer_load_url");
      let _this = this;
      this.player_destroy();
      this.RTCplayer = new ZLMRTCClient.Endpoint({
        element: this.$refs.video, // video 标签
        debug: false, // 是否打印日志
        zlmsdpUrl: url, //流地址
        useCamera: false,
        recvOnly: true,
      });
      this.RTCplayer.on(
        ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,
        function (e) {
          // ICE 协商出错
          console.log("ICE 协商出错");
        }
      );
      this.RTCplayer.on(
        ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,
        function (e) {
          //获取到了远端流，可以播放
          console.log("播放成功", e.streams);
        }
      );
      this.RTCplayer.on(
        ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
        function (e) {
          // offer anwser 交换失败
          console.log("offer anwser 交换失败", e);
          // stop();
          _this.player_destroy();
        }
      );
      this.RTCplayer.on(
        ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,
        function (s) {
          // 获取到了本地流
          // console.log('offer anwser 交换失败')
        }
      );

      this.RTCplayer.on(
        ZLMRTCClient.Events.CAPTURE_STREAM_FAILED,
        function (s) {
          // 获取本地流失败
          console.log("获取本地流失败");
        }
      );
      this.RTCplayer.on(
        ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,
        function (state) {
          // RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
          console.log("当前状态==>", state);
        }
      );
    },
    HLSplayer_load_url(url) {
      console.log("11111111111122223");
      this.player_destroy();
      // url = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8'//测试地址
      if (url.indexOf(".m3u8") == -1 && url.indexOf(".M3U8") == -1) {
        ("获取的播放地址格式错误");
        console.warn("获取的播放地址格式错误");
        return;
      }
      var element = this.$refs.video;
      if (Hls.isSupported()) {
        if (!this.HLSplayer) {
          this.HLSplayer = new Hls();
        }
        this.HLSplayer.loadSource(url);
        this.HLSplayer.attachMedia(element);
        this.HLSplayer.on(Hls.Events.MANIFEST_PARSED, function () {
          console.log("加载成功");
          this.player_start();
        });
        this.status = "loading";
        // console.log(Hls)
        // console.log(hls)
      } else {
        console.log("hls加载错误");
      }
    },
    player_start() {
      this.playing = true;
      if (this.myPlugin == "ts") {
        if (this.TSplayer) {
          this.TSplayer.play();
        } else {
          console.log("未加载视频文件");
        }
      } else if (this.myPlugin == "flv") {
        if (this.FLVplayer) {
          this.FLVplayer.play();
        } else {
          console.log("未加载视频文件");
        }
      } else {
        var video = this.$refs.video;
        video.play();
      }
    },
    player_pause() {
      this.playing = false;
      if (this.myPlugin == "ts") {
        if (this.TSplayer) {
          this.TSplayer.pause();
        } else {
          console.log("未加载视频文件");
        }
      } else if (this.myPlugin == "flv") {
        if (this.FLVplayer) {
          this.FLVplayer.pause();
        } else {
          console.log("未加载视频文件");
        }
      } else {
        var video = this.$refs.video;
        video.pause();
      }
    },
    player_destroy() {
      if (this.TSplayer && typeof this.TSplayer == "object") {
        this.TSplayer.pause();
        this.TSplayer.unload();
        this.TSplayer.detachMediaElement();
        this.TSplayer.destroy();
        this.TSplayer = null;
        console.log("销毁TSplayer");
      }
      if (this.FLVplayer && typeof this.FLVplayer == "object") {
        this.FLVplayer.pause();
        this.FLVplayer.unload();
        this.FLVplayer.detachMediaElement();
        this.FLVplayer.destroy();
        this.FLVplayer = null;
        console.log("销毁FLVplayer");
      }
      if (this.RTCplayer && typeof this.RTCplayer == "object") {
        // let element = this.$refs.video;
        // element.pause();
        this.RTCplayer.close();
        this.RTCplayer = null;
        let element = this.$refs.video;
        element.srcObject = null;
        element.load();
        console.log("销毁RTCplayer");
      }
      if (this.HLSplayer && typeof this.HLSplayer == "object") {
        let element = this.$refs.video;
        element.pause();
        this.HLSplayer.detachMedia();
        this.HLSplayer.destroy();
        this.HLSplayer = null;
        console.log("销毁HLSplayer");
      }
      this.status = "none";
      this.duration = 0;
      this.playing = false;
    },
    player_seekto(sec) {
      if (this.myPlugin == "ts") {
        if (this.TSplayer) {
          if (this.duration != 0 && this.duration != Infinity) {
            this.TSplayer.currentTime = parseFloat(sec);
          } else {
            console.log("未获取到有效的视频时长");
          }
        } else {
          console.log("未加载视频文件");
        }
      } else if (this.myPlugin == "flv") {
        if (this.FLVplayer) {
          if (this.duration != 0 && this.duration != Infinity) {
            this.FLVplayer.currentTime = parseFloat(sec);
          } else {
            console.log("未获取到有效的视频时长");
          }
        } else {
          console.log("未加载视频文件");
        }
      } else {
        var video = this.$refs.video;
        video.currentTime = sec;
      }
    },

    // 视频播放上一个下一个
    player_creamupdown(value) {
      if (this.item.type == "task") {
        // 任务排序倒序   晚=》早
        if (value == "down") {
          if (this.item.n == 0) {
            this.item.n = this.item.childrenList.length - 1;
          } else {
            this.item.n -= 1;
          }
        } else if (value == "up") {
          if (this.item.n == this.item.childrenList.length - 1) {
            this.item.n = 0;
          } else {
            this.item.n += 1;
          }
        }
      } else if (this.item.type == "camera") {
        // 摄像机排序顺序  早=》晚
        if (value == "up") {
          if (this.item.n == 0) {
            this.item.n = this.item.childrenList.length - 1;
          } else {
            this.item.n -= 1;
          }
        } else if (value == "down") {
          if (this.item.n == this.item.childrenList.length - 1) {
            this.item.n = 0;
          } else {
            this.item.n += 1;
          }
        }
      }

      console.log(this.item.n, "childrenList的第几项");
      // 最终调用父级的方法
      this.$parent.playCamera(
        this.item.index + 1,
        this.item.childrenList[this.item.n]
      );
    },

    //播放停止
    videoStop() {
      console.log("视频停止");
      this.player_destroy();
      // eventBus.$emit('playerClose',this.item.index);
    },
    // 播放清空
    videoClear(item) {
      console.log(this.playMode);
      console.log(item, "视频点击停止执行");
      item.cameraId = "";
      item.playerHeaderText = "";
      item.hasPtz = false;
      item.platformId = "";
      item.domainType = "";

      if (this.playMode == "live") {
        item.urlOption = null;
        item.ptzAddr = "";
        this.myUrl = "";
      } else if (this.playMode == "record") {
        item.playerStatusText = "";
        item.urlOption = null;
        this.myIsLive = true;
        this.myUrl = "";
      }
    },
    // 清空myUrl
    videoUrl() {
      console.log(this.myUrl, "this.myUrl");
      this.myUrl = "";
    },
    // 播放暂停
    videoStart(toPlay) {
      console.log(toPlay);
      console.log("====视频播放、暂停===");

      this.playing = toPlay;
      let el = this.$refs.tip;
      el.innerText = this.playing ? "暂停" : "播放";
      // console.log(TSplayer);
      // console.log(this.playing);
      if (this.TSplayer || this.FLVplayer || this.HLSplayer || this.RTCplayer) {
        if (toPlay) {
          console.log(11111111);
          this.player_start();
        } else {
          console.log(2222222222);
          this.player_pause();
        }
      } else {
        if (this.myUrl) {
          console.log(this.item.cameraId);
          console.log(333333333333);
          getAction("/dispatcher/video/single/" + this.item.cameraId).then(
            (res) => {
              if (res.code == "00000") {
                console.log(res.data.webrtc);
                console.log(this.myUrl);

                this.myUrl = res.data.webrtc;
                this.player_load(this.myUrl);
              } else {
                // A0510: 编码器服务异常;
                // A0509: 无可用的编码器通道;
                this.$message.warning(res.msg || "获取直播地址错误");
                this.player_load(this.myUrl);
              }
            }
          );
          console.log("自动加载视频文件", this.myUrl);
          // this.player_load(this.myUrl);
        } else {
          console.log(4444444444);
          console.log("未加载视频文件");
        }
      }
    },
    // 画面拉伸
    handCanon() {
      this.baseStyles["objectFit"] = "fill";
    },
    // 画面标准
    handDraw() {
      delete this.baseStyles.objectFit;
    },

    // loading开始加载
    startLoad() {
      this.loading = true;
    },
    // loading结束加载
    endLoad() {
      this.loading = false;
    },

    // 移入画面
    hadndMouse() {
      console.log("鼠标移入主页面");
      this.showControlBar = true;
    },
    // 移出画面
    handLeave() {
      console.log("鼠标移出主页面");
      this.showControlBar = false;
    },

    // 云台
    handlerPan() {
      this.$bus.$emit("pan", true);
    },
    // 截屏
    screenshot() {
      // this.savePic('111');
      var video = this.$refs.video; // 找到需要截图的video标签
      video.setAttribute("crossOrigin", "anonymous"); //添加srossOrigin属性，解决跨域问题
      // console.log(video.videoWidth)
      // console.log(video.videoHeight)
      if (!video.videoWidth || !video.videoHeight) {
        this.$message.warn("请打开有效视屏再截屏");
        return;
      }
      // var video = document.querySelector('#videoElementID');  // 找到需要截图的video标签
      var canvas = document.createElement("canvas");
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas
        .getContext("2d")
        .drawImage(video, 0, 0, canvas.width, canvas.height); // 图片大小和视频分辨率一致
      var strDataURL = canvas.toDataURL("image/png"); // canvas中video中取一帧图片并转成dataURL
      this.downFile(strDataURL, moment().format("YYYYMMDDHHmmss"));
      // this.downFileClicked(strDataURL, "图片");   //下载截图
    },
    // 下载截图到本地，绑定事件下载
    downFile(data, fileName) {
      var save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      ); //有效的内部空间URI
      save_link.href = data;
      save_link.download = fileName;
      var event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },
    // 添加隐藏按钮下载
    downFileClicked(data, fileName) {
      var arr = data.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      var blob = new Blob([u8arr], {
        type: mime,
      });
      var url = window.URL.createObjectURL(blob);
      var a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      setTimeout(function () {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
      }, 1000);
    },

    // 全屏点击方法
    fullscreenClick() {
      console.log(this.item.isFull, "全屏");
      if (this.item) {
        if (this.item.isFull) {
          eventBus.$emit("playerCancelFull", this.item.index);
        } else {
          eventBus.$emit("playerFull", this.item.index);
        }
      } else {
        console.log("没有播放信息");
      }
      // var video = this.$refs.videoContainer;
      // // 退出全屏
      // if(this.isFullScreen){
      // 	this.cancelFullscreen()
      // 	this.isFullScreen = false;
      // 	window.onresize = null;
      // }
      // else{
      // 	this.fullscreen(video)
      // 	this.isFullScreen = true;
      // 	window.onresize = this.onresize;
      // }
    },
    // window 监听是否全屏
    onresize() {
      console.log("window.onresize");
      var isFull =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
      this.isFullScreen = isFull ? true : false;
      if (this.isFullScreen == false) {
        window.onresize = null;
      }
    },
    // 全屏
    fullscreen(element) {
      console.log(element, "=全屏fullscreen=");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.oRequestFullscreen) {
        element.oRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      } else {
        console.log("这是全屏");
      }
    },
    // 退出全屏
    cancelFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msCancelFullscreen) {
        document.msCancelFullscreen();
      } else if (document.oCancelFullscreen) {
        document.oCancelFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else {
        console.log("请按ESC退出全屏");
      }
    },
    // 监听事件
    eventAdd(e) {
      var Media = this.$refs.video;
      Media.addEventListener(
        e,
        () => {
          if (e != "timeupdate") {
            console.log(
              new Date().getTime(),
              e,
              "总时长:",
              Media.duration,
              "秒"
            );
          }
          // 暂停，停止的时候playing=>false
          if (e == "ended") {
            console.log("ended", Media.duration);
            this.duration = Media.duration;
            this.playing = false;
            this.status = "ended";
            // 直播情况下结束，重新开始直播
            if (this.myIsLive) {
              if (this.myUrl) {
                console.log("直播结束，重新连接如下直播地址：", this.myUrl);
                this.player_load(this.myUrl);
              }
            }
          } else if (e == "pause") {
            this.playing = false;
            this.status = "pause";
          } else if (e == "play") {
            this.playing = true;
            this.status = "play";
          } else if (e == "timeupdate") {
            // console.log('timeupdate',Media.currentTime)
            this.currentTime = Media.currentTime;
          } else if (e == "loadedmetadata") {
            // console.log('loadedmetadata',Media.duration)
            this.duration = Media.duration;
          } else if (e == "durationchange") {
            // console.log('loadedmetadata',Media.duration)
            this.duration = Media.duration;
          } else if (e == "abort") {
            console.log("-----------abort-----------");
            this.currentTime = 0;
            // this.duration = 0;
          } else if (e == "error") {
            console.log("-----------error-----------");
            this.currentTime = 0;
            this.duration = 0;
          } else if (e == "ratechange") {
            console.log("-----------ratechange-----------", Media.playbackRate);
          }
        },
        false
      );
    },

    // 默认声音关闭
    volumeValueDown() {
      console.log("--------mounted初始化默认声音关闭-------");
      var Media = this.$refs.video;
      Media.volume = 0 / 100;
      this.volumeValue = 0;
      console.log(Media.volume, "Media.volume");
    },
  },
  beforeDestroy() {
    console.log("player beforeDestroy");
    window.onresize = null;
    this.player_destroy();
    if (this.ti) {
      clearTimeout(this.ti);
      this.ti = null;
    }
  },
  mounted() {
    console.log("player mounted");
    console.log(this.item, "this.item");
    console.log(this.width);
    console.log(this.height);
    console.log(this.volumeValue);

    // this.baseStyles['objectFit'] = 'fill';//播放器画面默认填充拉伸

    this.volumeValueDown(); //默认声音关闭

    if (this.myUrl) {
      this.player_load(this.myUrl);
    }

    // this.refreshVideoWithUrl('http://test2.iksonya.com/ts/test','ts',true);
    // setTimeout(()=>{
    // 	this.refreshVideoWithUrl('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8','hls',false);
    // },10000)

    // polyvisionts
    this.$nextTick(() => {
      this.changeWidth = this.width;
      this.changeHeight = this.height;
    });

    if (polyvisionts) {
      this.testJSObject = polyvisionts;
    }

    this.$nextTick(() => {
      // this.eventAdd("loadstart"); //客户端开始请求数据
      // this.eventAdd("progress"); //客户端正在请求数据
      // this.eventAdd("suspend"); //延迟下载
      // this.eventAdd("abort"); //客户端主动终止下载（不是因为错误引起）
      // this.eventAdd("loadstart"); //客户端开始请求数据
      // this.eventAdd("progress"); //客户端正在请求数据
      // this.eventAdd("suspend"); //延迟下载
      this.eventAdd("abort"); //客户端主动终止下载（不是因为错误引起），
      this.eventAdd("error"); //请求数据时遇到错误
      // this.eventAdd("stalled"); //网速失速
      this.eventAdd("play"); //play()和autoplay开始播放时触发
      this.eventAdd("pause"); //pause()触发
      this.eventAdd("loadedmetadata"); //成功获取资源长度
      // this.eventAdd("loadeddata"); //
      // this.eventAdd("waiting"); //等待数据，并非错误
      // this.eventAdd("playing"); //开始回放
      // this.eventAdd("canplay"); //可以播放，但中途可能因为加载而暂停
      // this.eventAdd("canplaythrough"); //可以播放，歌曲全部加载完毕
      // this.eventAdd("seeking"); //寻找中
      // this.eventAdd("seeked"); //寻找完毕
      this.eventAdd("timeupdate"); //播放时间改变
      this.eventAdd("ended"); //播放结束
      this.eventAdd("ratechange"); //播放速率改变
      this.eventAdd("durationchange"); //资源长度改变
      this.eventAdd("volumechange"); //音量改变
    });
  },
  // todo 如果加载失败，url置空
};
</script>

<style lang="less" scoped>
@import "../../../public/dist/aliplayer-min.css";
.ant-btn {
  margin: 10px;
}
.info {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 32%;
  min-height: 20%;
  background-color: rgba(0, 0, 0, 0.08);
  padding: 5px;
  .title {
    font-size: 20px;
    float: left;
    width: 50%;
    height: 30px;
  }
  .subTitle {
    font-size: 16px;
    float: left;
    width: 50%;
    height: 30px;
  }
  .content {
    margin-top: 5px;
    font-size: 14px;
    float: left;
  }
}
.alarmTips {
  position: absolute;
  left: 34%;
  top: 1%;
  width: 32%;
  min-height: 20%;
  background-color: rgba(0, 0, 0, 0.08);
}
.recordTips {
  position: absolute;
  left: 67%;
  top: 1%;
  width: 32%;
  height: 20%;
  background-color: rgba(0, 0, 0, 0.08);
}
.channelInfo {
  position: absolute;
  left: 1%;
  bottom: 1%;
  width: 32%;
  min-height: 20%;
  background-color: rgba(0, 0, 0, 0.08);
  padding: 5px;
  .videoInfoItem {
    width: 100%;
    height: 24px;
    .title {
      margin-right: 5px;
      text-align: right;
      float: left;
      width: 110px;
      // height: 30px;
    }
    .subTitle {
      overflow: hidden;
      text-overflow: ellipsis; //超出部分以省略号显示
      white-space: nowrap;
      min-width: 30px;
      max-width: 130px;
      // font-size: 16px;
      float: left;
      // width: 50%;
      // height: 30px;
    }
  }
}
// video画面
.centeredVideo {
}
.alermSet {
  position: absolute;
  right: 1%;
  bottom: 1%;
  width: 32%;
  min-height: 20%;
  background-color: rgba(0, 0, 0, 0.08);
}
//所有控件
video::-webkit-media-controls {
  display: none !important;
}
.unuserselect {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}
.ratevalue {
  // cursor:default;
  cursor: pointer;
}
// //全屏按钮
// video::-webkit-media-controls-fullscreen-button {
//     display: none;
// }
// //播放按钮
// video::-webkit-media-controls-play-button {
//     display: none;
// }
// //进度条
// video::-webkit-media-controls-timeline {
//     display: none;
// }
// //观看的当前时间
// video::-webkit-media-controls-current-time-display{
//     display: none;
// }
// //剩余时间
// video::-webkit-media-controls-time-remaining-display {
//     display: none;
// }
// //音量按钮
// video::-webkit-media-controls-mute-button {
//     display: none;
// }
// video::-webkit-media-controls-toggle-closed-captions-button {
//     display: none;
// }
// //音量的控制条
// video::-webkit-media-controls-volume-slider {
//     display: none;
// }
// //所有控件
// video::-webkit-media-controls-enclosure{
//     display: none;
// }
</style>
